<template>
  <el-dialog
    :visible.sync="showPop"
    :close-on-click-modal="false"
    top="35vh"
  >
    <div class="pop-detail">
      <div class="close-icon" @click="showPop = false">
        <span>×</span>
      </div>
      <div class="content">
        <p v-if="marker && marker.type == 'zjfgzjc'">
          工程名称：{{ marker.otherInfo.address }}
        </p>
        <el-table
          v-if="qxList.length"
          :data="qxList"
          border
          class="point-detail-table"
        >
          <el-table-column label="倾斜" align="center">
            <el-table-column
              prop="shortText1726708565621"
              label="设备编号"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="jsTime"
              label="监测日期"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="监测次数"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column label="监测值" align="center">
              <el-table-column prop="xdata" label="x" align="center" width="70">
              </el-table-column>
              <el-table-column prop="ydata" label="y" align="center" width="70">
              </el-table-column>
            </el-table-column>
            <el-table-column label="本次变化量" align="center">
              <el-table-column
                prop="xthisData"
                label="x"
                align="center"
                width="70"
              >
              </el-table-column>
              <el-table-column
                prop="ythisData"
                label="y"
                align="center"
                width="70"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="累计变化量" align="center">
              <el-table-column
                prop="xcumulativeData"
                label="x"
                align="center"
                width="70"
              >
              </el-table-column>
              <el-table-column
                prop="ycumulativeData"
                label="y"
                align="center"
                width="70"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 裂缝 -->
        <el-table
          v-if="lfList.length"
          :data="lfList"
          border
          class="point-detail-table"
        >
          <el-table-column label="裂缝" align="center">
            <el-table-column
              prop="shortText1726708565621"
              label="设备编号"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="jsTime"
              label="监测日期"
              align="center"
              width="150"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="监测次数"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="value"
              label="监测值"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="thisValue"
              label="本次变化量"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="cumulativeValue"
              label="累计变化量"
              align="center"
              width="70"
            >
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 沉降 -->
        <el-table
          v-if="cjList.length"
          :data="cjList"
          border
          class="point-detail-table"
        >
          <el-table-column label="沉降" align="center">
            <el-table-column
              prop="shortText1726708565621"
              label="设备编号"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="jsTime"
              label="监测日期"
              align="center"
              width="150"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="监测次数"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="value"
              label="监测值"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="thisValue"
              label="本次变化量"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="cumulativeValue"
              label="累计变化量"
              align="center"
              width="70"
            >
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 应变 -->
        <el-table
          v-if="ybList.length"
          :data="ybList"
          border
          class="point-detail-table"
        >
          <el-table-column label="应变" align="center">
            <el-table-column
              prop="shortText1726708565621"
              label="设备编号"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="jsTime"
              label="监测日期"
              align="center"
              width="150"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="监测次数"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="value"
              label="监测值"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="thisValue"
              label="本次变化量"
              align="center"
              width="70"
            >
            </el-table-column>
            <el-table-column
              prop="cumulativeValue"
              label="累计变化量"
              align="center"
              width="70"
            >
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 智慧用电安全人员分布详情展示 -->
        <template v-if="marker && marker.type == 'ptjmyh'">
          <div class="people-info-box">
            <el-descriptions title="" :column="2" border>
              <el-descriptions-item label="姓名">
                {{ marker.otherInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item label="用户身份">
                {{ marker.otherInfo.userIdentity }}
              </el-descriptions-item>
              <el-descriptions-item label="所在地区">
                {{ marker.otherInfo.area }}
              </el-descriptions-item>
              <el-descriptions-item label="单位名称">
                {{ marker.otherInfo.depName }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                {{ marker.otherInfo.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                {{ marker.otherInfo.status ? "在线" : "离线" }}
              </el-descriptions-item>
              <el-descriptions-item label="地址">
                {{ marker.otherInfo.address }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>
<script>

import { buildingCoordinateDetail } from "@/api/index";
export default {
  name: "pointDeatil",
  data() {
    return {
      marker: null,
      showPop: false, //地图标注信息弹窗
      qxList: [],
      lfList: [],
      cjList: [],
      ybList: [],
    };
  },
  mounted() {},
  methods: {
    getPointDetailInfo(id, marker) {
      this.marker = marker;
      // 自建房坐标点详情
      buildingCoordinateDetail({ id }).then((res) => {
        this.qxList = res.qxList ?? [];
        this.lfList = res.lfList ?? [];
        this.cjList = res.cjList ?? [];
        this.ybList = res.ybList ?? [];
      });
    },
  },
};
</script>

<style scoped lang="scss">
.point-detail-table {
  background-color: transparent !important;
}
</style>
<style scoped lang="scss">
.pop-detail {
  width: 38vw;
  // height: 45vh;
  // min-height: 35vh;
  max-height: 55vh;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 110;
  padding: 3vh 1vw 2vh 1.5vw;
  background: url("@/assets/image/popupbg2.png") no-repeat;
  background-size: 100% 100%;

  .close-icon {
    width: 0.18rem;
    height: 0.18rem;
    background-color: #a7caea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000e36;
    font-weight: 700;
    position: absolute;
    right: 1vw;
    top: 1.5vh;
    cursor: pointer;
  }

  .content {
    width: 100%;
    height: 100%;
    > P {
      color: #0ff;
      margin-bottom: 1vh;
      font-size: 0.14rem;
    }
    .point-detail-table {
      width: 100%;
      max-height: 30vh;
      margin-top: 1vh;
      overflow: auto;
    }
    .people-info-box {
      margin-top: 1.5vh;
    }
  }
}
</style>
